<template>
  <a-tabs v-model:activeKey="props.activeKey" @change="changeTabs" ref="Tab">
    <a-tab-pane :tab="item.tabName" v-for="(item, index) in props.tabsList" :key="item.key">
      <slot :item="item"></slot>
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts" setup>
import { ref, } from "vue"
import tabsProps from './tabsConfig/props'
const emit = defineEmits(['changeTabs']) //子传父
//props
const props = defineProps(tabsProps);
const active = document.querySelector('.ant-tabs-tabpane-active')
const Tab = ref(null);
//methods
const changeTabs = (activeKey: number) => {
  emit('changeTabs', activeKey)
}
defineExpose({ Tab })
</script>

<style lang="less" scoped></style>